import React, { Component } from 'react'
import { NavBar, Icon,Toast } from 'antd-mobile';
import styles from './Citylist.module.scss'
import { getAreaCity,getAreaHot } from '../../api/index'
import {getCurrentCity,setLocalCity } from '../../utils/baiduMap'
import { List } from 'react-virtualized'
// import ListExample from '../../dome/ListExample'
export default class Citylist extends Component {
  listRef = React.createRef()
 state = {
    finalCity:[],
    finalCityIndex:[],
    activeIndex: 0
  }
  componentDidMount(){
    this.getCityData()
  }
  async getCityData(){
    // 最终渲染的城市数据
    const finalCity = []
    // 当前城市定位
    const currentCity = await getCurrentCity()
     // 获取城市列表数据
    const citys =  (await getAreaCity()).data.body
     // 热门城市
    const hots =   (await getAreaHot()).data.body
    // 添加当前定位城市到数组中
    finalCity.push({
      title:'当前定位',
      children:[currentCity]
    })
    // 添加热门城市
    finalCity.push({
      title:'热门城市',
      children:hots
    })
    //  citys.sort((a,b)=>{
    //   if(a.short < b.short) {
    //     return -1
    //   } else {
    //     return 1
    //   }
    //   })
    // 排序
    citys.sort((a,b)=>( a.short < b.short ? -1 : 1)) 
    citys.forEach((item)=>{
      // 把当前首字母转换成大写，再看看是否在数组中
      /**
       * firstLetter  这个是首字母
      */
      const firstLetter = item.short.charAt(0).toUpperCase()
      // console.log('首字母',firstLetter);
      // 检测 finalCity 是否已存在首字母的编组
      //  1.如果不存在，新建编组，并把当前城市写入
      //  2. 如果已经存在，直接写入 children 中即可
     const index = finalCity.findIndex(item2 => item2.title === firstLetter)
    //  如果不存在
     if(index === -1){
      // 情况一
        finalCity.push({
          title: firstLetter,
          children:[item]
        }) 
     } else {
      // 情况二 如果已经存在，直接追加 children 中即可
      finalCity[index].children.push(item)
     }
    })
    // 基于城市列表数据map映射出索引数组
    const finalCityIndex = finalCity.map(item=>item.title)
    // 删除前两项，替换成 '#' 和 '热'
    finalCityIndex.splice(0,2,'#','热')
    this.setState({
      finalCity,
      finalCityIndex
    })
            // 调用 measureAllRows，提前计算 List 中每一行的高度，实现 scrollToRow 的精确跳转
            this.listRef.current.measureAllRows()
  }
  // 一行的内容
  rowRenderer = ({key,index,style}) =>{
  const {finalCity} = this.state
    return <div className={styles.row} key={key} style={style}>
      <div 
        className={styles.title}>--{finalCity[index].title}--
      </div>
      {finalCity[index].children.map(item =>
         <div onClick={()=>{
          console.log('你点击了', item.label)
          const hotCitys = this.state.finalCity[1].children.map((item) => item.label)
          // console.log(hotCitys)
          if (hotCitys.includes(item.label)) {
            // 更新本地存储的城市信息
            setLocalCity({ label: item.label, value: item.value })
            // 返回上一页
            this.props.history.goBack()
          } else {
            // console.log('不是热门城市，没有房源信息')
            // Toast 为 antd 组件库的轻提示功能
            Toast.info('当前城市房源信息正在完善中...', 1)
          }
         }}  key={item.label} className={styles.city}>{item.label}</div>
      )}

    </div>
  }
  rowHeight = ({ index }) =>{
    // 一行内容的高度 =  36标题的高度 + 城市数量 * 50
    return 36 + this.state.finalCity[index].children.length * 50
  }

  // 用于获取List组件中渲染行的信息
  onRowsRendered = ({ startIndex }) => {
    if (this.state.activeIndex !== startIndex) {
      this.setState({
        activeIndex: startIndex
      })
      console.log('end：', this.state.activeIndex)
    }
    
  }
  render() {
    const { finalCity,finalCityIndex,activeIndex } = this.state
    return (
      <div  className={styles.citys}>
        {/* 城市选择 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => 
            this.props.history.goBack()
          }
          >城市选择</NavBar>
          <div>
            {/* <ListExample /> */}
            {/* 
            scrollToAlignment  对其方式
            scrollToIndex 滚动
            */}
            <List
              ref={this.listRef}
              scrollToAlignment='start'
              onRowsRendered={this.onRowsRendered}
              width={window.screen.width}
              scrollToIndex={activeIndex}
              height={window.screen.height-45}
              rowCount={finalCity.length}
              rowHeight={this.rowHeight}
              rowRenderer={this.rowRenderer}
            ></List>
          </div>
          <div className={styles.cityIndex}>
            {finalCityIndex.map((item,index) =>
              <span key={item}
              onClick={() => {
                // this.setState({ activeIndex: index })
                this.listRef.current.scrollToRow(index)
              }}
              // <span key={item} onClick={()=>{
              //   this.setState({
              //   activeIndex:index
              // })}} 
              // className={`${styles.cityIndexItem} ${activeIndex === index ? styles.active: ''}`}>
              className={`${styles.cityIndexItem} ${activeIndex === index ? styles.active : ''}`}>
              {item}
            </span>
            )}
          </div>
      </div>
    )
  }
}
